﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>流程监控</title>
    <!--<link href="Scripts/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="Scripts/bootstrap/css/font-awesome.css" rel="stylesheet">
    <link href="./Style/skin/css/style.css" rel="stylesheet" type="text/css" />
    <link href="./Style/skin/font/iconfont.css" rel="stylesheet" type="text/css" />-->

    <link href="Scripts/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="Scripts/bootstrap/css/font-awesome.css" rel="stylesheet" />
    <link href="Style/skin/css/style.css" rel="stylesheet" type="text/css" />
    <link href="Style/skin/css/animate.css" rel="stylesheet" type="text/css" />
    <link href="Style/skin/font/iconfont.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="Scripts/bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="Scripts/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="Style/skin/js/mp.mansory.min.js"></script>
    <script src="Scripts/layui/layui/lay/modules/layer.js" type="text/javascript"></script>
    <script src="Scripts/QueryString.js"></script>
    <script src="Scripts/config.js" type="text/javascript"></script>
    <script src="Comm/Gener.js" type="text/javascript"></script>
    <link href="../DataUser/Style/ccbpm.css" rel="stylesheet" />
    <!-- 处理多语言 -->
    <script src="Data/lang/load.js" type="text/javascript"></script>
    <script src="Data/lang/js/zh-cn.js"></script>
    <script src="Data/lang/lang.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">

        //页面启动函数.
        var webUser = new WebUser();
        $(function () {
            //   document.title = window.lang.fqxlc;
            InitPage();
        });

        //初始化数据.
        function InitPage() {

            $('#docs').html(window.lang.loading);
            var handler = new HttpHandler("BP.WF.HttpHandler.WF");
            var data = handler.DoMethodReturnString("Watchdog_Init");
            if (data.indexOf('err@') == 0) {
                alert(data);
                return;
            }

            data = JSON.parse(data);

            var left = "";
            for (var i = 0; i < data.length; i++) {
                var group = data[i];
                left += "<tr><td><a href='javascript:ShowFlows(\"" + group.FK_Flow + "\");'>" + group.FlowName + "（" + group.Num + "）</a></td></tr>";
            }
            $('#left').html(left);

            $('#docs').html("请选择流程。。。");

            //绑定流程.
            ShowFlows(GetQueryString("FK_Flow"));
        }

        function ShowFlows(flowNo) {

            $("#Help").hide();
            $('#docs').html("");
            if (flowNo == null || flowNo == 'null' || flowNo == undefined) {
                $("#Help").show();
                return;
            }

            var html = "<table class='table table-bordered table-hover'>";
            html += "<thead><tr>";
            html += "<th>序</th>";
            html += "<th>标题</th>";
            html += "<th>状态</th>";
            html += "<th>发起人</th>";
            html += "<th>发起日期</th>";
            html += "<th>停留节点</th>";
            html += "<th>处理人</th>";
            html += "<th>应完成日期</th>";
            html += "<th>状态</th>";
            html += "</tr></thead>";

            var handler = new HttpHandler("BP.WF.HttpHandler.WF");
            handler.AddPara("FK_Flow", flowNo);
            var data = handler.DoMethodReturnJSON("Watchdog_InitFlows");

            for (var i = 0; i < data.length; i++) {

                var dt = data[i];

                html += "<tr>";
                html += "<td>" + (i + 1) + "</td>";
                html += "<td><a href=\"javascript:OpenIt('" + dt.WorkID + "','" + dt.FK_Flow + "','" + dt.FK_Node + "')\" >" + dt.Title + "</td>";
                html += "<td>" + GenerFlowState(dt.WFState) + "</td>";
                html += "<td>" + dt.StarterName + "</td>";
                html += "<td>" + dt.RDT + "</td>";
                html += "<td>" + dt.NodeName + "</td>";
                html += "<td>" + dt.TodoEmps + "</td>";
                html += "<td>" + dt.SDTOfNode + "</td>";
                html += "<td>" + GenerNodeTimeState(dt) + "</td>";
                html += "</tr>";
            }
            html += "</table>";
            html += "</div></div>";

            $('#docs').html(html);
        }
        function GenerFlowState(sta) {

            if (sta == 2) return "运行中";
            if (sta == 3) return "已完成";
            if (sta == 5) return "退回";
            if (sta == 7) return "删除";
            if (sta == 8) return "加签";
            if (sta == 9) return "冻结";
            if (sta == 4) return "挂起";

            return "其他" + sta;
        }
        function GenerNodeTimeState(dt) {
            var nodeID = dt.FK_Node;
            //获取当前时间
            var cdt = getNowFormatDate();
            //开始节点撤销回来后，就是逾期状态.
            var len = nodeID.toString().length;
            var entStr = nodeID.toString().substr(len - 2);

            //判断期限是否少于三天，加警告颜色
            var date = new Date();
            var edt = dt.SDTOfNode.replace(/\-/g, "/");
            edt = new Date(Date.parse(edt.replace(/-/g, "/")));
            passTime = GetSpanTime(date, edt);
            //判断流程是否逾期
            if (cdt > dt.SDTOfNode && dt.WFState == 2 && entStr != "01" && dt.RDT != dt.SDTOfNode) {
                return "<font color=red>逾期</font>";
            }
            else {
                if (passTime >= 0 && passTime < 2 * 24 * 3600 * 1000 && dt.WFState != 3) {
                    return "<font color='#ffac38'>预警</font>";
                } else {
                    return "<font color=green>正常</font>";
                }

            }

        }

        function OpenIt(workID, flowNo, nodeID) {

            var url = "WFRpt.htm?WorkID=" + workID + "&FK_Flow=" + flowNo + "&FK_Node=" + nodeID;
            WinOpenFull(url);

            //window.location.href = 'Watchdog.htm?IsRef=1';
        }
        //获取当前时间
        function getNowFormatDate() {
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            //当前时间=年份-月份-日 小时：分钟
            var cdt = date.getFullYear() + seperator1 + month + seperator1 + strDate
                + " " + date.getHours() + seperator2 + date.getMinutes();

            return cdt;
        }
        function GetSpanTime(date1, date2) {
            ///<summary>计算date2-date1的时间差，返回使用“x天x小时x分x秒”形式的字符串表示</summary>
            var date3 = date2.getTime() - date1.getTime();  //时间差秒

            return date3;
        }
    </script>
</head>
<body>
    <!--<section class="content-header" style="margin-left: 20px;">
        <h2>
            流程监控
        </h2>
    </section>-->

    <div class="col-md-12">
        <div class="box col-md-3">

            <!-- /.box-header -->
            <div class="box-body">
                <table id="example2" class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>流程列表</th>
                        </tr>
                    </thead>
                    <tbody id="left"></tbody>

                </table>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->

        <div class="box col-md-9">
            <!--<div class="box-header">
                <h3 class="box-title">Hover Data Table</h3>
            </div>-->
            <!-- /.box-header -->
            <div class="box-body" id="docs">
            </div>

            <div id="Help" style=" vertical-align:middle; text-align:center">
                <fieldset style=" text-align:left">
                    <legend> 帮助 </legend>
                    <ul>
                        <li>1. 该功能是流程监控，就是非流程的参与人可以对指定的流程进行，查看、删除、移交、回滚、调整等操作。 </li>
                        <li>2. 您所看到的流程，就是系统管理员分配给您可以监控的流程. </li>
                        <li>3. 如果你可不到您需要的流程，请与管理员联系设置,设置路径：流程属性-》基本信息=》权限控制 </li>
                        <li>4. 当您打开一个工作的时候，在右边tab标签页的【操作】里可以对该流程进行，相关的权限操作。 </li>
                    </ul>
                </fieldset>
            </div>

            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>

</body>
</html>